import React from 'react'
// ===================================================================== Image
import Z1 from '@img/test-center/status/1.png'	// 超出临床可报告范围
import Z2 from '@img/test-center/status/2.png'	// 超出线性范围
import Z3 from '@img/test-center/status/3.png'	// 资料待审核
import Z4 from '@img/test-center/status/4.png'	// 已外包
import Z5 from '@img/test-center/status/5.png'	// 敏感词
import Z6 from '@img/test-center/status/6.png'	// 阳性
// ===================================================================== Declare
const { $Lazy } = window
// ===================================================================== Lazy
const Checkbox 	= $Lazy.state(()=>import('@antd/form/checkbox'))
const Button 	= $Lazy.load(()=>import('@antd/button'))
const Image 	= $Lazy.load(()=>import('@tp/image'))
// ===================================================================== Component
// ===================================================================== 状态信息
const StatusData = [
	{ src:Z1, title:'临床范围', 		name:'over_clinical' },
	{ src:Z2, title:'线性范围', 		name:'over_linear' },
	{ src:Z3, title:'资料待审核', 	name:'case_info_status' },
	{ src:Z4, title:'已外包', 		name:'outsourcing_company_code' },
	{ src:Z5, title:'敏感词', 		name:'is_sensitive_words'},
	{ src:Z6, title:'阳性', 		name:'result' }
]
let clear
const _ = {
	// 获取对应字段
	getStatus(){	
		const stack = {}
		StatusData.forEach(v=> stack[v.name] = 0)
		return stack
	},
	// 状态信息组件
	StatusComponent({ data, onDoubleClick, isEntrust }){
		const [ display, setDisplay ] = React.useState('none')
		const [ show, setShow ] = React.useState(false)
		const [ index, setIndex ] = React.useState(-1)
		const resize = React.useCallback(()=>{
			const $list = document.querySelector('.project-list')
			if($list){
				setShow($list.clientWidth > 654)
				// setDisplay($list.clientWidth < 940)
				// 因增加复选框 增加判断宽度 2021-9-2 2:40:38 ?F10: PM? --伍智睿
				setDisplay($list.clientWidth < 1037)
			}
		},[])
		
		React.useEffect(()=>{
			clearTimeout(clear)
			clear = setTimeout(resize,500)
		},[resize])
		return (
			show ? (
				<ul className='fxm b model-status' style={{display:'flex'}}>
					{
						StatusData.map(({ title, name, src },i)=>{
							const list = (
								<li className={`fxm cp tap ${i===0?'':'ml5'} ${i===index?'c0':''}`} key={i} title={title} onDoubleClick={()=>{
									onDoubleClick?.(name)
									setIndex(i)
								}}>
									<div>
										{ !display && <span className='status-ttile'>{title}</span> }
										【{data[name] || 0}】
									</div>
									<span className='mr5'>:</span>
									<Image className='rel' style={{top:1}} width={10} src={src} />
								</li>
							)
							if(isEntrust){
								return title === '已外包'  ? null : list
							}else{
								return  list
							}
						})
					}
				</ul>
			) : null
		)
	},
	TitlePrefixComponent(){
		return (
			<div className='ml15 jz-checkbox'>
				<Button label='设置表头' ghost className='mr15' size='small' onClick={()=>this?.table?.openHeader?.(this.state.cols)} />
				{ 
					!this.isBingLiMode && !this.props?.top?.way && (
						<Checkbox label='完整项目' onRef={ref=>this.crossRef=ref} isNumber onChange={ value => {
							this.props.btnGroupRef().getCrossPageSubmit( value )
						}} />
					)
				}
				
				{ !this.props?.top?.way && <Checkbox label='倒序' isNumber onRef={ref=>this.reverseRef=ref} onChange={ value =>{
					this.paramModel = { ...this.paramModel, ...this.props?.searchRef()?.model, reverse_order: value}
					this.onSubmit(this.paramModel)
				}} /> }
				{	
					// 是否使用上次报告时间 2021-9-2 11:21:41 ?F10: PM? --伍智睿
					!this.isBingLiMode && this.props?.btnGroupRef()?.index?.toString() === '2' && (
						<Checkbox label='使用上次报告时间' isNumber onChange={ value =>{
							this.props.btnGroupRef().useOldApproveAt( value )
						}} />
					)
				}
			</div>
		)
	},
	resize() {
		const $list = document.querySelector('.project-list')
		if($list){
			const $model = $list.querySelector('.model-status')
			if($model){
				const $title = $model.querySelector('.status-ttile')
				if($title){
					// if($list.clientWidth < 940){
					// 因增加复选框 增加判断宽度 2021-9-2 2:40:38 ?F10: PM? --伍智睿
					if($list.clientWidth < 1037){
						$title.style.display = 'none'
					}else{
						$title.style.display = 'inline'
					}
				}
			}
		}
	},
}

export default _